﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-stand|ie-comp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="//css.lzlcdn.com/js/jRange/jquery.range.css">
    <title>调节音量大小</title>
    <style>
        .slider-container {
            margin: 100px auto 40px auto;
        }

        #main {
            width: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <input type="hidden" class="single-slider" value="50" />
    <div id="main">
        <label><input type="checkbox" id="ckb" />静音</label>
    </div>
    <script src="//js.lzlcdn.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//js.lzlcdn.com/js/jRange/jquery.range.min.js"></script>
    <script>
        $(function () {
            var progress = $('.single-slider');
            var ckb = $('#ckb');

            function updateState(data) {
                var i = data.voice.toFixed(0);
                progress.val(i);
                progress.jRange('setValue',i);
                ckb.prop('checked', data.isMute);
            }
            progress.jRange({
                from: 0,
                to: 100,
                step: 1,
                scale: [0, 100],
                format: '%s',
                width: 300,
                showLabels: true,
                theme: "theme-blue",
                snap: true,
                onstatechange: function (voice) {
                    $.post('/voice/update', { voice: voice }, function (data) {
                        updateState(data);
                    });
                }
            });
            ckb.change(function () {
                $.post('/voice/mute', { isMute: this.checked?'True':'False' }, function (data) {
                    updateState(data);
                });
            });
            $.post('/voice/current', function (data) {
                updateState(data);
            });
        });
    </script>
</body>
</html>
